<template>
  <div class="detail-overview">
    <ArrowContainer head-text="设备概况">
      <div slot="content">
        <el-table :data="subData.monkey_device_status" style="width: 100%">
          <el-table-column prop="mobile_model" label="测试机型" width="180px"></el-table-column>
          <el-table-column prop="mobile_version" label="系统版本" width="150px"></el-table-column>
          <el-table-column label="运行状态" width="180px">
            <template slot-scope="scope">
              <el-tag>{{scope.row.current_stage}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="process" label="完成度"></el-table-column>
          <el-table-column label="安装">
            <template slot-scope="scope">
              <i
                class="el-icon-success success"
                :class="{'no-success': scope.row.setup_install_app_status !== 1}"
              ></i>
            </template>
          </el-table-column>
          <el-table-column label="启动">
            <template slot-scope="scope">
              <i
                class="el-icon-success success"
                :class="{'no-success': scope.row.start_app_status !== 1}"
              ></i>
            </template>
          </el-table-column>
          <el-table-column label="登陆">
            <template slot-scope="scope">
              <i
                class="el-icon-success success"
                :class="{'no-success': scope.row.login_app_status !== 1}"
              ></i>
            </template>
          </el-table-column>
          <el-table-column prop="crash_count" label="Crash"></el-table-column>
          <el-table-column prop="anr_count" label="ANR"></el-table-column>
          <el-table-column prop="exception_count" label="Exception"></el-table-column>
          <el-table-column prop="activity_count" width="180">
            <template slot="header">
              activety数
              <el-tooltip effect="dark" content="本次执行遍历的Activity总数,值越大遍历越深" placement="top">
                <i class="el-icon-question" style="font-size: 16px;"></i>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </ArrowContainer>
    <ArrowContainer head-text="测试概况">
      <div slot="content" class="chart-content">
        <!-- 图一 -->
        <div class="chart-one chart-item">
          <h3 class="chart-item-title">阶段通过率表格</h3>
          <el-table :data="passRateTable" style="width: 100%">
            <el-table-column prop="result" label="测试结果"></el-table-column>
            <el-table-column prop="success" label="通过数量"></el-table-column>
            <el-table-column prop="fail" label="未通过数量"></el-table-column>
            <el-table-column prop="passRate" label="通过率" width="80px"></el-table-column>
          </el-table>
          <h3 class="chart-item-title">各类异常</h3>
          <el-table :data="abnormalTable" style="width: 100%">
            <el-table-column prop="crash" label="Crash总数"></el-table-column>
            <el-table-column prop="anr" label="Anr总数"></el-table-column>
            <el-table-column prop="exception" label="Exception总数"></el-table-column>
          </el-table>
        </div>
        <!-- 图二 -->
        <div class="chart-two chart-item">
          <h3 class="chart-item-title">阶段通过率图表</h3>
          <div ref="passRate" style="height: 500px;"></div>
        </div>
        <!-- 图三 -->
        <div class="chart-three chart-item" style="display: none;">
          <h3 class="chart-item-title">测试任务完成度</h3>
          <div ref="finishRate" style="height: 500px;"></div>
        </div>
      </div>
    </ArrowContainer>
    <ArrowContainer head-text="错误概况">
      <div slot="content">
        <el-table :data="errorTable" style="width: 100%">
          <el-table-column type="expand">
            <!-- 展开列表详细 -->
            <template slot-scope="scope">
              <p
                v-for="(item, index) in formateMessage(scope.row.error_message)"
                :key="index"
              >{{item}}</p>
            </template>
          </el-table-column>
          <el-table-column prop="error_type" label="类别" width="80px"></el-table-column>
          <el-table-column prop="error_count" label="出现次数" width="80px"></el-table-column>
          <el-table-column label="描述">
            <template slot-scope="scope">{{formateMessage(scope.row.error_message)[1]}}</template>
          </el-table-column>
        </el-table>
        <div v-show="total > 0" style="text-align: center; padding-top: 10px;">
          <el-pagination
            @current-change="pageChange"
            :current-page.sync="pageIndex"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </ArrowContainer>
  </div>
</template>

<script>
import ArrowContainer from "../../common/ArrowContainer";
import monkeyApi from "@/api/monkey.js";
const echarts = require("echarts");

export default {
  data() {
    return {
      deviceData: [
        {
          model: "OPPO A33",
          version: "5.1.1",
          status: "成功",
          progress: "100%",
          install: true,
          start: true,
          logIn: true,
          crash: 0,
          anr: 0,
          exception: 0,
          activety: 0
        }
      ],
      // 图1-1
      passRateTable: [
        {
          result: "安装",
          success: 0,
          fail: 0,
          passRate: "0%"
        },
        {
          result: "启动",
          success: 0,
          fail: 0,
          passRate: "0%"
        },
        {
          result: "登录",
          success: 0,
          fail: 0,
          passRate: "0%"
        },
        {
          result: "运行",
          success: 0,
          fail: 0,
          passRate: "0%"
        }
      ],
      // 图1-2
      abnormalTable: [],
      errorTable: [],
      total: 0,
      pageIndex: 1,
      pageSize: 10
    };
  },
  components: {
    ArrowContainer
  },
  props: ["subData"],
  methods: {
    // 图 1-1
    getPassRateTable() {
      this.passRateTable.forEach(item => {
        switch (item.result) {
          case "安装":
            this.formatPassRate("setup_install_app_status", item);
            break;
          case "启动":
            this.formatPassRate("start_app_status", item);
            break;
          case "登录":
            this.formatPassRate("login_app_status", item);
            break;
          case "运行":
            this.formatPassRate("running_status", item);
            break;
          default:
            break;
        }
      });
      this.getPassChars(this.passRateTable);
    },
    formatPassRate(key, item) {
      let success = 0;
      let all = this.subData.monkey_device_status.length;
      this.subData.monkey_device_status.forEach(item => {
        if (item[key] === 1) {
          success++;
        }
      });
      item.success = success;
      item.fail = all - success;
      item.passRate = ((success / all) * 100).toFixed(2) + " %";
    },
    // 图 1-2
    getAbnormalTable() {
      this.abnormalTable = [
        {
          crash: this.formateAbnormal("crash_count"),
          anr: this.formateAbnormal("anr_count"),
          exception: this.formateAbnormal("exception_count")
        }
      ];
    },
    formateAbnormal(key) {
      let countArr = this.subData.monkey_device_status.map(item => {
        return item[key];
      });
      return countArr.reduce((prev, cur) => {
        return prev + cur;
      });
    },
    // 图 2
    getPassChars(params) {
      let successArr = params.map(item => {
        return item.success;
      });
      let myChart = echarts.init(this.$refs.passRate);
      let spirit =
        "image://";
      let maxData = this.subData.monkey_device_status.length;
      let options = {
        tooltip: {},
        xAxis: {
          max: maxData,
          splitLine: {
            show: false
          },
          offset: 10,
          axisLine: {
            lineStyle: {
              color: "#999"
            }
          },
          axisLabel: {
            margin: 10
          }
        },
        yAxis: {
          data: ["安装", "启动", "登陆", "运行"],
          inverse: true,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              color: "#999",
              fontSize: 16
            }
          }
        },
        grid: {
          top: 50,
          height: 150,
          left: 70,
          right: 100
        },
        series: [
          {
            type: "pictorialBar",
            symbol: spirit,
            symbolRepeat: "fixed",
            symbolMargin: "5%",
            symbolClip: true,
            symbolSize: 30,
            symbolBoundingData: maxData,
            data: successArr,
            markLine: {
              symbol: "none",
              label: {
                normal: {
                  formatter: "max: {c}",
                  position: "start"
                }
              },
              lineStyle: {
                normal: {
                  color: "green",
                  type: "dotted",
                  opacity: 0.2,
                  width: 2
                }
              },
              data: [
                {
                  type: "max"
                }
              ]
            },
            z: 10
          },
          {
            type: "pictorialBar",
            itemStyle: {
              normal: {
                opacity: 0.2
              }
            },
            label: {
              normal: {
                show: true,
                formatter: function(params) {
                  return ((params.value / maxData) * 100).toFixed(1) + " %";
                },
                position: "right",
                offset: [10, 0],
                textStyle: {
                  color: "green",
                  fontSize: 18
                }
              }
            },
            animationDuration: 0,
            symbolRepeat: "fixed",
            symbolMargin: "5%",
            symbol: spirit,
            symbolSize: 30,
            symbolBoundingData: maxData,
            data: successArr,
            z: 5
          }
        ]
      };
      myChart.setOption(options);
    },
    // 图 3
    getFinishChars() {
      let myChart = echarts.init(this.$refs.finishRate);
      let options = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}分钟 ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["未完成", "已完成"]
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "36%"],
            data: [
              { value: "57", name: "未完成" },
              { value: "63", name: "已完成" }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      myChart.setOption(options);
    },
    // 获取错误日志
    getErrorTable() {
      let params = {
        page_size: this.pageSize,
        page_index: this.pageIndex,
        monkey_id: this.subData.id,
        task_id: ""
      };
      monkeyApi
        .getErrorList(params)
        .then(res => {
          this.errorTable = res.data.data;
          this.total = res.data.total;
        })
        .catch(err => {
          this.$message.error(err.message);
        });
    },
    // 处理错误日志描述
    formateMessage(logMessage) {
      let logArr = JSON.parse(logMessage);
      return logArr;
    },
    pageChange(val) {
      this.getErrorTable();
    }
  },
  watch: {
    subData() {
      if (this.subData.monkey_device_status.length === 0) {
        return;
      }
      this.getPassRateTable(); // 图1-1
      this.getAbnormalTable(); // 图1-2
      this.getErrorTable();
    }
  }
};
</script>

<style lang="scss" scoped>
.detail-overview {
  padding-top: 15px;

  .success {
    color: #67c23a;
    font-size: 16px;
  }
  .no-success {
    color: #666;
  }

  .chart-content {
    display: flex;
    // justify-content: start;
    // flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    .chart-item {
      height: 330px;
      &.chart-one {
        width: 400px;
      }

      &.chart-two {
        width: 450px;
      }

      &.chart-three {
        width: 450px;
      }

      .chart-item-title {
        font-weight: 500;
      }
    }
  }
}
</style>
